<template>
  <header>
    <h2 @click="addCount">
      库存统计{{ count }}
    </h2>
    <div class="chart" id="threeChart">
        图表内容
    </div>
  </header>
</template>

<script lang="ts">
// 第一种写法
import { Options, Vue } from 'vue-class-component'
import { inject } from 'vue'

@Options({
  data () {
    return {
    }
  }
})
export default class itemThree extends Vue {
  private chartData = [
    { value: 848, name: 'Search Engine' },
    { value: 735, name: 'Direct' },
    { value: 580, name: 'Email' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' }
  ]

  mounted ():void {
    console.log('mounted')
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    var $echarts:any = inject('echarts')
    // init初始化echarts图表
    var myChart = $echarts.init(document.getElementById('threeChart'))
    myChart.setOption({
      // 设置图例
      legend: {
        top: 'bottom'
      },
      // 聚焦显示提示框
      tooltip: {
        show: true
      },
      series: [
        {
          type: 'pie',
          data: this.chartData,
          // 内外圆角
          radius: [10, 100],
          center: ['50%', '45%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 10
          }
        }
      ]
    })
  }

  private count = 0

  addCount ():void {
    ++this.count
  }
}
// 第二种写法
// import { inject, onMounted, reactive } from 'vue'
// export default {
//   setup () {
//     var $echarts:any = inject('echarts')
//     var chartData = [
//       { value: 1048, name: 'Search Engine' },
//       { value: 735, name: 'Direct' },
//       { value: 580, name: 'Email' },
//       { value: 484, name: 'Union Ads' },
//       { value: 300, name: 'Video Ads' }
//     ]
//     onMounted(() => {
//       // init初始化echarts图表
//       const myChart = $echarts.init(document.getElementById('threeChart'))
//       myChart.setOption({
//         // 设置图例
//         legend: {
//           top: 'bottom'
//         },
//         // 聚焦显示提示框
//         tooltip: {
//           show: true
//         },
//         series: [
//           {
//             type: 'pie',
//             data: chartData,
//             // 内外圆角
//             radius: [10, 100],
//             center: ['50%', '45%'],
//             roseType: 'area',
//             itemStyle: {
//               borderRadius: 10
//             }
//           }
//         ]
//       })
//     })
//     return {
//       chartData
//     }
//   }
// }
</script>
<style lang='scss' scoped>
.chart {
  height: 4.75rem;
}
h2 {
  height: .3125rem;
  color: #fff;
  line-height: .3125rem;
  font-size: .25rem;
  text-align: center;
}
</style>
